<template>
  <div class="search">

    <van-cell v-for="item in searchTipsArr" :key="item" :title="item"></van-cell>

    <div class="top">
      <div class="history" v-if="!searchTipsArr.length && searchHistoryData.length">
        <div class="title">
          <span>历史记录</span>
          <span @click="deleteHistory"><van-icon name="delete-o" /></span>
        </div>
        <ul class="content">
          <li v-for="(item, index) in searchHistoryData" :key="index" @click="changeSearch(item)">{{ item }}</li>

        </ul>
      </div>
    </div>
    <div class="hot" v-if="!searchTipsArr.length">
      <div class="title">
        <span>热门搜索</span>
      </div>
      <ul class="content">
        <li v-for="(item, index) in hotKeywordVOList" :key="index" @click="changeSearch(item.keyword)">{{ item.keyword }}
        </li>

      </ul>
    </div>


  </div>
</template>

<script lang="ts">

import { defineComponent } from "vue"
import { useRouter } from "vue-router"
export default defineComponent({
  name: 'History',
})

</script>

<script lang="ts" setup>
const router = useRouter()
const props = defineProps<{
  hotKeywordVOList: [],
  searchTipsArr: [],
  searchHistoryData: [],
  deleteHistory: (payload: MouseEvent) => void
  valuechange: (keyword: string) => void
}>()

const changeSearch = (keyword: string) => {
  props.valuechange(keyword)

  router.push({
    path: "/search/classIficationlist",
    query: { keyword }
  })
}

</script>

<style    scoped>
.search {
  background-color: rgb(218, 216, 216);
  height: 100%;
}

.top {
  background-color: white;
}

.history {
  height: 80px;
  padding: 15px;
  font-size: 14px;
  color: grey;
  margin-bottom: 10px;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content {
  display: flex;
  flex-wrap: wrap;
}

li {
  height: 22px;
  border: 1px solid black;
  border-radius: 5px;
  line-height: 22px;
  padding: 0 5px;
  margin: 10px 5px;
  text-align: center;
}




.hot {
  padding: 15px;
  font-size: 14px;
  background-color: white;
  color: grey;

  height: 120px;
}

.content {
  display: flex;
  flex-wrap: wrap;
}

li {
  height: 22px;
  border: 1px solid black;
  border-radius: 5px;
  line-height: 22px;
  padding: 0 5px;
  margin: 10px 5px;
  text-align: center;
}

.hot li:nth-child(1) {
  border: 1px solid red;
  color: red;
}
</style>